<template>
  <div class="home">
    <template v-if="isMobile">
      <van-nav-bar title="路由导航" />
      <van-cell-group inset v-for="route in routes" :key="route.path">
        <van-cell :title="route.meta?.title || route.name" :to="route.path" is-link />
      </van-cell-group>
    </template>
    <template v-else>
      <el-container>
        <el-header>
          <h2>路由导航</h2>
        </el-header>
        <el-main>
          <div class="route-grid">
            <el-card v-for="route in routes" :key="route.path" class="route-card" @click="$router.push(route.path)">
              <template #header>
                <div class="card-header">
                  <span>{{ route.meta?.title || route.name }}</span>
                  <el-icon><arrow-right /></el-icon>
                </div>
              </template>
              <div class="card-content">
                <p>路径: {{ route.path }}</p>
              </div>
            </el-card>
          </div>
        </el-main>
      </el-container>
    </template>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '@/stores'
import { useWindowSize } from '@vueuse/core'
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const store = useMainStore()
const { width } = useWindowSize()

const routes = computed(() => router.getRoutes().filter(route => route.path !== '/'))

const checkDevice = () => {
  store.setIsMobile(width.value < 768)
}

onMounted(() => {
  checkDevice()
  window.addEventListener('resize', checkDevice)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkDevice)
})

const isMobile = computed(() => store.isMobile)
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.el-header {
  background-color: #f5f7fa;
  padding: 20px;
  text-align: center;
}

.el-main {
  padding: 20px;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.route-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.route-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  color: #666;
}

/* 移动端样式优化 */
:deep(.van-nav-bar) {
  background-color: #f5f7fa;
}

:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.van-cell-group) {
  margin: 12px 16px;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.van-cell) {
  padding: 16px;
}

:deep(.van-cell__title) {
  font-size: 16px;
  color: #2c3e50;
}

:deep(.van-cell__value) {
  color: #666;
}
</style>